<template>
	<div class="login-container">
		<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #001A33; opacity: 0.3; pointer-events: none;"></div>
		<div class="login-content-wrap">
			<div class="login-content gradient-border login-panel">
				<!-- <div class="login-img">
					<img src="@/assets/images/login-pic.jpg" />
				</div> -->
				<div class="login-form-wrap">
					<!-- logo -->
					<div class="login-logo flex align-center justify-center">
						<!-- <img class="logo" src="@/assets/images/logo1.png" /> -->
						<h3 class="title">{{ title }}</h3>
					</div>
					<!-- 表单 -->
					<div class="login-form search-dark text-white">
						<lay-json-schema-form ref="loginFormRef" :model="loginForm" :schema="formSchema"></lay-json-schema-form>
						<div class="text-right text-gray margin-top cursor-pointer">
							<span @click="flowPwTip">忘记密码？</span>
						</div>
						<el-button type="primary" size="large" class="login-btn" :loading="loading" @click.native.prevent="handleLogin">登 录</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-box text-gray">
			<div class="text-center">
				{{ Copyright }}
			</div>
			<div class="margin-top text-center">当前版本号：{{ version }}</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, nextTick, getCurrentInstance, reactive } from 'vue';
	import { useUserStore } from '@/store/modules/user';
	import { useRouter } from 'vue-router';

	import request from '@/utils/request';
	const router = useRouter();
	const { proxy } = getCurrentInstance();
	const store = useUserStore();
	const title = ref(baseConfig.title); //标题
	const verifycodeImg = ref('');

	// 加载验证码,刷新验证码
	function loadCaptcha() {
		request({
			url: `Login/GetCaptcha`,
			method: 'get',
			params: { username: loginForm.value.userName },
		}).then((res) => {
			const data = res.data;
			verifycodeImg.value = `data:image/png;base64,${data}`;
		});
	}

	// 表单数据
	const loginForm = ref({
		userName: '', //登录账号
		password: '', //登录密码
		verifyCode: '', //验证码
	});

	const loginFormRef = ref(null); //表单ref

	const formSchema = reactive({
		userName: {
			type: 'input',
			required: true,
			requiredErrorMessage: '登录账号不能为空',
			props: {
				type: 'text',
				allowClear: true,
				placeholder: '登录账号',
				prefixIcon: 'layui-icon-username',
			},
		},
		password: {
			type: 'input',
			required: true,
			requiredErrorMessage: '登录密码不能为空',
			props: {
				type: 'password',
				password: 'password',
				allowClear: true,
				autocomplete: 'off',
				placeholder: '登录密码',
				prefixIcon: 'layui-icon-key',
			},
		}
	});

	const loading = ref(false); //按钮loading

	//忘记密码
	function flowPwTip() {
		proxy.$msg.info('请联系管理员重置密码！');
	}

	//登录提交
	function handleLogin() {
		loginFormRef.value.validate((isValidate, model, errors) => {
			if (isValidate) {
				loading.value = true;
				let loginFormCopy = JSON.parse(JSON.stringify(loginForm.value)); //深拷贝
				loginFormCopy.password = proxy.$common.encryptedData(loginFormCopy.password); //加密密码
				store.toLogin(loginFormCopy).then((res) => {
					setTimeout(() => {
						loading.value = false;
						router.push('/');
					}, 2000);
					proxy.$msg.success('登录成功！');
				}).catch((error) => {
					loading.value = false;
				});
			} else {
				return false;
			}
		});
	}
	const Copyright = ref(baseConfig.Copyright);
	const version = ref(baseConfig.version);
</script>

<style lang="scss" scoped>
	.login-container {
		height: 100vh;
		//   justify-content: center;
		//   align-items: center;
		display: flex;
		flex-direction: column;
		background: #0d70ff url('@/assets/images/main-bg.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;

		.login-content-wrap {
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.login-content {
				display: flex;
				width: 600px;
				height: 500px;
				justify-content: center;
				align-items: center;
				border-radius: 10px;
				
				.login-img {
					width: 500px;

					img {
						width: 500px;
						height: 400px;
						border-radius: 10px 0 0 10px;
					}
				}

				.login-form-wrap {
					width: 500px;
					padding: 15px 15px 15px 30px;

					.login-logo {
						.logo {
							width: 50px;
							height: 50px;
							vertical-align: middle;
						}

						.title {
							font-size: 28px;
							letter-spacing: 5px;
							margin-left: 15px;
							font-weight: 700;
							background-image: linear-gradient(to right, rgb(13, 112, 255), rgb(31, 225, 255));
							background-clip: text;
							-webkit-text-fill-color: transparent;
							text-align: center;
							color: rgb(0, 255, 255);
						}
					}

					.login-form {
						width: 440px;
						margin-top: 30px;

						.login-btn {
							width: 100%;
							margin-top: 20px;
						}
					}

					#verifycode {
						width: 120px;
						height: 35px;
						border: 1px solid #dfdfdf;
						margin-left: 10px;
						margin-top: 1px;
						vertical-align: middle;
						cursor: pointer;
					}
				}
			}
		}

		.layui-form-item {
			margin-bottom: 20px !important;
		}
	}

	.bottom-box {
		align-self: center;
		width: 100%;
		padding: 15px;
	}

	.gradient-border {
		border-width: 4px;
		border-style: solid;
		border-image: radial-gradient(#0d70ff 60%, rgba(0, 128, 0, 0) 90%) 1;
		box-shadow: 0 0 20px #0d70ff;
	}

	.login-panel {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 4px;
		box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
		transition: all 0.3s ease;
	}

	.login-panel:hover {
		box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
	}
</style>